<template>
  <div class="card content-box">
    <span class="text">事件录入</span>
    <el-form label-width="auto" id="advice-form">
      <el-form-item label="发起人" prop="userID">
        <el-input v-model="petitionModel.userID" placeholder="请输入编号"></el-input>
      </el-form-item>
      <!-- 证件类型和身份证号 -->
      <!-- 呈递单位 -->
      <el-form-item label="呈递单位">
        <el-select v-model="petitionModel.institution" placeholder="请选择上访单位">
          <!-- select 选项 -->
          <el-option v-for="item in institutions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="关键词">
        <el-select v-model="petitionModel.keywords" placeholder="请选择关键字">
          <!-- select 选项 -->
          <el-option v-for="item in keyWords" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="petitionModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="信访内容">
        <el-input v-model="petitionModel.description" :rows="4" type="textarea" placeholder="请输入" />
        <div class="word">
          <span class="text_count">{{ petitionModel.description.length }}</span> /
          <span class="num_count" id="numCount">1000</span>
        </div>
      </el-form-item>
      <!-- 相关附件 -->
      <el-form-item label="相关附件">
        <div class="fujian">
          <p style="color: #747474; margin: 8px">请点击添加附件按钮,将与信访（建议）事项相关的电子文档在此上传。</p>
          <div id="fujian"></div>
        </div>
      </el-form-item>
      <!-- <textarea placeholder="请上传文件" class="layui-textarea" lay-verify="required" lay-filter="fujian" name="fujian" id="fujian"></textarea> -->
      <el-form-item id="upload2">
        <upload :file-list="fileList" @update-filename="handleFileName"></upload>
      </el-form-item>
      <!-- 提交和重置按钮 -->
      <el-form-item class="buttonbox">
        <el-button type="primary" @click="click1" class="msg-send-btn">提交</el-button>
        <el-button @click="click2" class="msg-send-btn">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="dragDirect">
import upload from "@/components/upload.vue";
import { recordService } from "@/api/core/funcs";
import { ref } from "vue";

//上访机构
const institutions = ref([
  "重庆市信访办公室",
  "重庆市万州区信访办",
  "重庆市涪陵区信访办",
  "重庆市渝中区信访办",
  "重庆市大渡口区信访办",
  "重庆市江北区信访办",
  "重庆市沙坪坝区信访办",
  "重庆市九龙坡区信访办",
  "重庆市南岸区信访办",
  "重庆市北碚区信访办",
  "重庆市綦江区信访办",
  "重庆市大足区信访办",
  "重庆市渝北区信访办",
  "重庆市巴南区信访办",
  "重庆市黔江区信访办",
  "重庆市长寿区信访办",
  "重庆市江津区信访办",
  "重庆市合川区信访办",
  "重庆市永川区信访办",
  "重庆市南川区信访办",
  "重庆市璧山区信访办",
  "重庆市铜梁区信访办",
  "重庆市潼南区信访办",
  "重庆市荣昌区信访办",
  "重庆市开州区信访办",
  "重庆市梁平区信访办",
  "重庆市武隆区信访办",
  "重庆两江新区管委会信访办",
  "重庆市万盛经开区信访办",
  "重庆高新区综合执法局（信访办）",
  "重庆市城口县信访办",
  "重庆市丰都县信访办",
  "重庆市垫江县信访办",
  "重庆市忠县信访办",
  "重庆市云阳县信访办",
  "重庆市奉节县信访办",
  "重庆市巫山县信访办",
  "重庆市巫溪县信访办",
  "重庆市石柱县信访办",
  "重庆市秀山县信访办",
  "重庆市酉阳县信访办",
  "重庆市彭水县信访办"
]);

const keyWords = ref([
  "农村农业",
  "国土资源",
  "城乡建设",
  "劳动和社会保障",
  "卫生计生",
  "教育文体",
  "民政",
  "政法",
  "经济管理",
  "交通运输",
  "商贸旅游",
  "科技与信息产业",
  "环境保护",
  "党务政务",
  "组织人事",
  "纪检监察",
  "其他"
]);

//文件图片上传
const fileList = ref([]); // 用于存储从子组件接收的 filename

const handleFileName = filename => {
  console.log("Received filename:", filename);
  console.log("当前上传" + filename);
  fileList.value.push(filename); // 将新的文件名添加到数组中
};

//建议模型
const petitionModel = ref({
  createdAt: "",
  description: "",
  eventType: null,
  filePath: "",
  keywords: "",
  petitionDep: "",
  status: 1,
  title: "",
  userID: null
});

const clearPetitionModel = () => {
  petitionModel.value = {
    createdAt: "",
    description: "",
    eventType: null,
    filePath: "",
    keywords: "",
    petitionDep: "",
    status: null,
    title: "",
    userID: null
  };
};

//用户调用接口完成网上信访，差验证码校验部分，以及文件url处理（待商议
const postPetition = async () => {
  console.log("文件：" + fileList.value);
  //将所有文件url添加在description后
  petitionModel.value.description += "用户上传相关附件";
  for (let i = 0; i < fileList.value.length; i++) {
    petitionModel.value.filePath += fileList.value[i];
    petitionModel.value.filePath += ";";
  }
  console.log(petitionModel.value);
  await recordService(petitionModel.value);
  clearPetitionModel();
};

const click2 = () => {
  ElMessageBox.confirm("确定重置?", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      clearPetitionModel();
      ElMessage({
        type: "success",
        message: "重置成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作取消"
      });
    });
};

//
const click1 = () => {
  ElMessageBox.confirm("确定提交?", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      postPetition();
      clearPetitionModel();
      ElMessage({
        type: "success",
        message: "提交成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作取消"
      });
    });
};
</script>

<style scoped lang="scss">
@import "./index.scss";
/* 基本重置 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度 */
}

/* 表单容器样式 */
#advice-form {
  font-family: "Arial", sans-serif;
  max-width: 100%;
  margin: 1% auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  width: 80%; /* 使用百分比设置宽度 */
}

/* 表单项样式 */
.layui-form-item {
  margin-bottom: 1em; /* 为表单项设置底部外边距 */
  display: flex; /* 使用flex布局使元素在同一行 */
  align-items: center; /* 垂直居中对齐 */
}

/* 标签和星号样式 */
.layui-form-label {
  width: 20%; /* 使用百分比设置宽度 */
  padding-right: 1em; /* 为标签和输入框之间添加间距 */
  text-align: right; /* 标签右对齐 */
}

.bitian-xing {
  color: red;
}

/* 输入框和下拉选择框样式 */
.layui-input-inline,
.layui-input-block {
  flex-grow: 1; /* 让输入框占据剩余空间 */
  margin-left: 1em; /* 为输入框设置左边距 */
}

.layui-input,
.layui-textarea,
.layui-select {
  padding: 0.5em; /* 设置内边距 */
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%; /* 宽度为100% */
}

/* 单选按钮样式 */
.layui-input-block input[type="radio"] {
  margin-right: 0.5em; /* 为单选按钮设置右边距 */
}

/* 发送验证码按钮和验证码输入框在同一行 */
.msg-send-btn {
  display: inline-block; /* 使按钮内联显示 */
  margin-left: 1em; /* 为发送验证码按钮设置左边距 */
  padding: 0.5em 1em; /* 设置按钮内边距 */
  background-color: #009688;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 按钮容器样式 */
.layui-form-item.center {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

/* 提交和重置按钮样式 */
.layui-btn {
  padding: 0.5em 1em; /* 设置按钮内边距 */
  margin: 0 0.5em; /* 设置按钮之间的外边距 */
  border: none; /* 移除边框 */
  border-radius: 4px; /* 设置圆角 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
}

.submit-btn {
  background-color: #5fb878; /* 提交按钮的背景颜色 */
  color: white; /* 文字颜色 */
}

.submit-btn:hover {
  background-color: #4ca866; /* 提交按钮悬浮时的背景颜色 */
}

.cancel-btn {
  background-color: #999; /* 重置按钮的背景颜色 */
  color: white; /* 文字颜色 */
}

.cancel-btn:hover {
  background-color: #888; /* 重置按钮悬浮时的背景颜色 */
}

/* 字数统计样式 */
.word {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #666;
}

/* 代理信息样式 */
.sfdlData {
  display: none; /* 默认隐藏 */
  padding: 1em;
  border-top: 1px solid #eee;
}
.title_small {
  margin-top: 8%;
  margin-left: 10%;
  color: #666;
  font-size: 25px;
  font-weight: 700;
}

#upload2 {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center;
}

.breadcrumb {
  float: left;
  position: absolute;
  top: 18%;
  left: 80%;
  color: rgb(76, 159, 237);
  cursor: default !important;
}

.breadcrumbtext {
  color: rgb(76, 159, 237);
  cursor: default !important;
  font-size: 20px;
  font-weight: 600;
}

.buttonbox {
  margin-left: 41%;
  width: 18%;
}
#cap1 {
  width: 40%;
}
#cap2 {
  width: 25%;
  background-color: #009688;
  color: white;
}
#cap {
  display: flex;
  flex-direction: row;
}
</style>
